<template>
  <!-- 订单管理页 -->
  <div>
    <!-- 头部区域 -->
    <div class="header">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="所有订单" name="所有订单" />
        <el-tab-pane label="待支付" name="待支付" />
        <el-tab-pane label="待派单" name="待派单" />
        <el-tab-pane label="待接单" name="待接单" />
        <el-tab-pane label="待服务" name="待服务" />
        <el-tab-pane label="已完成" name="已完成" />
      </el-tabs>
    </div>
    <!-- 表格区域 -->
    <!-- 表格内容区域 -->
    <div class="table_content">
      <!-- :data整个表格的数据源 -->
      <el-table :data="orderData" style="width: 100%">
        <!-- 订单编号 -->
        <el-table-column prop="id" label="订单编号" align="center" />
        <!-- 下单时间 -->
        <el-table-column prop="orderTime" label="下单时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.orderTime | fmtDate_global }}
          </template>
        </el-table-column>
        <!-- 总价 -->
        <el-table-column prop="total" label="总价" align="center">
          <template slot-scope="scope">
            <span>￥</span>
            <span style="color:#e65d6e;font-size: 18px;margin-right: 3px;">{{ scope.row.total }}</span>
            <span>元</span>
          </template>
        </el-table-column>
        <!-- 状态 -->
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status=='待派单'" type="success">{{ scope.row.status }}</el-tag>
            <el-tag v-if="scope.row.status=='待服务'" type="info">{{ scope.row.status }}</el-tag>
            <el-tag v-if="scope.row.status=='待接单'" type="warning">{{ scope.row.status }}</el-tag>
            <el-tag v-if="scope.row.status=='已完成'" type="info">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <!-- 顾客ID -->
        <el-table-column prop="customerId" label="顾客ID" align="center" />
        <!-- 员工ID -->
        <el-table-column prop="employeeId" label="员工ID" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.employeeId">{{ scope.row.employeeId }}</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" align="center" prop="status">
          <template slot-scope="scope">
            <el-button type="text" size="small" style="color:#30b08f" @click="orderDetail(scope.row.id)">详情
            </el-button>
            <el-button
              v-if="scope.row.status=='待派单'"
              type="text"
              size="small"
              style="color:#30b08f"
              @click="paiOrder(scope.row.id)"
            >
              派单
            </el-button>
            <el-button
              v-if="scope.row.status=='待接单'"
              type="text"
              size="small"
              style="color:#ffba00"
              @click="cancel(scope.row.id)"
            >取消派单
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 底部分页按钮 -->
    <div class="paginetion">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[2,4,6,10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 派单模态框 -->
    <el-dialog title="派单" :visible.sync="dialogVisible" width="50%">
      <el-radio-group v-for="item in waiter.filter(item=>item.roles[0].name=='员工')" :key="item.id" v-model="waiterId">
        <el-radio :label="item.id" border style="margin:0 20px 20px 0">
          {{ item.username }}
          {{ item.realname }}
        </el-radio>
      </el-radio-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitOrder">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 引入axios
import {
  get,
  post
} from '@/utils/request'
export default {
  data() {
    return {
      // 保存服务生的ID
      waiterId: '',
      // 保存服务生数组
      waiter: [],
      // 模态框的显示与隐藏
      dialogVisible: false,
      currentPage: 1,
      pageSize: 10,
      // 所有订单
      orderData: [],
      // 默认显示第一个即所有订单
      activeName: '所有订单',
      total: 0,
      // 订单ID
      orderId: ''

    }
  },
  computed: {},
  created() {
    this.getAllOrderData()
  },
  mounted() {},
  methods: {
    async submitOrder(waiterId, orderId) {
      const data = {
        waiterId: this.waiterId,
        orderId: this.orderId
      }

      const res = await get('/order/sendOrder', data)
      if (res.status == 200) {
        this.$message({
          message: res.message,
          type: 'success'
        })
      }
      this.dialogVisible = false
      this.getAllOrderData()
    },
    // 派单获取员工
    async paiOrder(orderId) {
      this.dialogVisible = true
      const res = await get('/baseUser/cascadeRoleFindAll')
      const arr = []
      for (var i = 0; i < res.data.length; i++) {
        if (res.data[i].roles.length != 0) {
          arr.push(res.data[i])
        }
      }
      this.waiter = arr
      console.log(this.waiter)
      // 接收插槽传递过来的参数
      this.orderId = orderId
    },
    // 取消派单
    async cancel(orderId) {
      const res = await get('/order/cancelSendOrder', {
        orderId
      })
      if (res.status == 200) {
        this.$message({
          message: res.message,
          type: 'success'
        })
      }
      // 刷新界面
      this.getAllOrderData()
    },
    // 订单详情
    orderDetail(detail) {
      // 传参
      this.$router.push({
        path: 'details',
        query: {
          detail
        }
      })
    },
    // 控制每页条数 每页要展示数据条数
    handleSizeChange(val) {
      this.pageSize = val
      // 将当前的页数重置到第一页
      this.currentPage = 1
      this.getAllOrderData()
    },
    // 控制当前显示的页数
    handleCurrentChange(val) {
      // 将当前页数与分页插件动态点击控制的页数组相绑定
      this.currentPage = val
      // 重新调用获取所以UC韩品数据的方法
      this.getAllOrderData()
    },
    // 分页获取所有订单的数据
    async getAllOrderData() {
      // 获取参数
      const data = {
        page: this.currentPage,
        pageSize: this.pageSize,
        status: this.activeName
      }
      if (this.activeName == '所有订单') {
        delete data.status
      }

      // 通过对应的参数发送网络请求，获取产品组数据
      const res = await get('/order/pageQuery', data)
      // 将data中的产品数组进行赋值
      this.orderData = res.data.list
      this.total = res.data.total
    },
    // tab栏默认点击
    handleClick(tab) {
      this.activeName = tab.label
      this.getAllOrderData()
    }
  }
}

</script>
<style scoped>
  /* 分页区域样式 */
  .paginetion {
    /* margin-top: 20px;
    position: fixed;
    bottom: 40px;
    right: 10px; */
    margin-top: 10px;
    float: right;
  }

</style>
